<script lang="ts" setup>
import {defineExpose, defineProps, ref} from "vue";

const props = defineProps({
  text: {
    type: String,
    required: true
  }
})

const isFloatExpanded = ref(false);
let floatTimeout: number | null = null;


// 打开预览时自动展开浮标5秒, 单位s
function showFloatTemporarily(delay: number) {
  isFloatExpanded.value = true;

  // 清除之前的定时器（如果有）
  if (floatTimeout) {
    clearTimeout(floatTimeout);
  }

  // 5秒后自动收起
  floatTimeout = setTimeout(() => {
    isFloatExpanded.value = false;
    floatTimeout = null;
  }, delay * 1000);
}

// 鼠标悬浮展开
function expandFloat() {
  isFloatExpanded.value = true;

  // 如果鼠标移入时正在倒计时，清除倒计时
  if (floatTimeout) {
    clearTimeout(floatTimeout);
    floatTimeout = null;
  }
}

// 鼠标离开收起
function collapseFloat() {
  isFloatExpanded.value = false;
}

const emit = defineEmits(['click'])

function handleClick() {
  emit("click")
}

defineExpose({
  showFloatTemporarily
})
</script>

<template>

  <div
      :class="{ 'expanded': isFloatExpanded }"
      class="collapse-float-left collapse-float-left-common"
      @click="handleClick"
      @mouseenter="expandFloat"
      @mouseleave="collapseFloat"
  >
    <span class="tooltip">{{ props.text }}</span>
  </div>
</template>

<style scoped>
.collapse-float-left-common {
  position: fixed;
  left: 0;
  transform: translateY(-50%);
  width: 8px;
  height: 60px;
  background: #6ba96e;
  border-top-right-radius: 4px;
  border-bottom-right-radius: 4px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 100;
  transition: all 0.3s ease;
  box-shadow: -2px 0 4px rgba(0, 0, 0, 0.1);
  overflow: hidden;
}

.collapse-float-left {
  top: 50vh;
}

/* 展开状态 */
.collapse-float-left-common.expanded {
  width: 35px;
  background: #3c5e34;
}

/* 工具提示 */
.collapse-float-left-common .tooltip {
  position: absolute;
  color: white;
  font-size: 12px;
  white-space: nowrap;
  opacity: 0;
  transition: opacity 0.2s ease;
  left: 8px;
}

/* 展开时显示工具提示 */
.collapse-float-left-common.expanded .tooltip {
  opacity: 1;
}

</style>